@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-calendar';

$sizes: 's', 'm', 'l';

.calendar {
  --min-width-s: 240px;
  --min-height-s: 256px;
  --min-width-m: 280px;
  --min-height-m: 308px;

  display: inline-flex;
  flex-direction: column;

  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;

  background-color: $sys-neutral-background2-level;

  &[data-fit-to-container] {
    width: 100%;
    height: 100%;
  }
}

/**
  Сделано через отдельные классы вместо селектора &[data-size='s'] для того, чтоб иметь минимальную специфичность,
  чтоб было легко задать размер "снаружи".
*/
.calendarSizeS {
  @include composite-var($calendar-container-s);
}

.calendarSizeM {
  @include composite-var($calendar-container-m);
}

.calendarSizeL {
  @include composite-var($calendar-container-l);
}

.header {
  flex-grow: 0;
  flex-shrink: 0;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($calendar, 'container', 'header', $size);
    }
  }
}

.body {
  position: relative;
  flex-grow: 1;
  flex-shrink: 1;
}

.rows {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($calendar, 'container', 'rows', $size);
    }
  }
}
